<template>
  <div class="homeborder">
    <div class="query-search">
      <div class="search">
        <div class="search-item">
          <div class="title">资源包名称</div>
          <a-input
            v-model:value="name"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入资源包名称"
          />
        </div>
        <div class="search-item">
          <div class="title">创建人</div>
          <a-input
            v-model:value="founder"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入创建人"
          />
        </div>
        <div class="search-item">
          <div class="title">创建时间</div>
          <a-input
            v-model:value="fondtime"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入创建时间"
          />
        </div>
        <div class="search-item">
          <div class="title">修改时间</div>
          <a-input
            v-model:value="updatetime"
            style="width: 500px"
            class="a-inp"
            placeholder="请输入修改时间"
          />
        </div>
      </div>
      <div class="search-btn">
        <a-button type="primary" ghost class="search-btn-item">搜索</a-button>
        <a-button class="search-btn-item">重置</a-button>
        <a-button type="primary" @click="showModal">新建</a-button>
      </div>
    </div>
    <div class="tb">
      <div class="top-margin">
        <a-modal
          v-model:open="open"
          okText="确定"
          cancelText="取消"
          title="新建资源包"
          @ok="handleOk"
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </a-modal>
      </div>

      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 4 }"
        :scroll="{ x: 1500 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button
              size="small"
              type="primary"
              class="button"
              @click="showModalVerify"
              :disabled="record.status === '已发布' && !canEdit(record)"
              value="small"
              >验证</a-button
            >
            <a-button
              type="primary"
              size="small"
              class="button"
              @click="showConfirm"
              ghost
              :disabled="record.status === '已发布' && !canEdit(record)"
              >发布</a-button
            >
            <a-button
              class="button"
              size="small"
              @click="showModalUpdate(record)"
              >编辑</a-button
            >
            <a-button type="primary" size="small" class="button" danger
              >删除</a-button
            >
            <a-button type="primary" size="small" danger ghost>克隆</a-button>
            <a-button type="dashed" size="small" class="button">下载</a-button>
            <a-button
              type="link"
              size="small"
              class="button"
              @click="showModalPreview"
              >预览</a-button
            >
          </template>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:open="openPreview"
      okText="确定"
      cancelText="取消"
      title="预览"
      @ok="handleOkPreview"
    >
      <div class="search-item-preview">
        <div class="title-preview">资源包名称</div>
        <a-input v-model:value="name" class="a-inp-preview" />
      </div>
      <div class="search-item-preview">
        <div class="title-preview">版本</div>
        <a-input v-model:value="name" class="a-inp-preview" />
      </div>
      <div class="search-item-preview-img">
        <div class="title-preview-img">登录logo</div>
        <div class="imgcontents">
          <div class="imgself">
            <img :src="Avatar" alt="Avatar" />
          </div>
          <div class="expAnddesc">
            <a class="example">查看示例</a>
            <div class="desc">建议上传1M以下的格式</div>
          </div>
        </div>
      </div>
      <div class="search-item-preview-img">
        <div class="title-preview-img">徽标logo</div>
        <div class="imgcontents">
          <div class="imgself">
            <img :src="Avatar" alt="Avatar" />
          </div>
          <div class="expAnddesc">
            <a class="example">查看示例</a>
            <div class="desc">建议上传1M以下的格式</div>
          </div>
        </div>
      </div>
      <div class="search-item-preview-img">
        <div class="title-preview-img">徽标logo</div>
        <div class="imgcontents">
          <div class="imgself">
            <img :src="Avatar" alt="Avatar" />
          </div>
          <div class="expAnddesc">
            <a class="example">查看示例</a>
            <div class="desc">建议上传1M以下的格式</div>
          </div>
        </div>
      </div>
      <div class="search-item-preview-img">
        <div class="title-preview-img">徽标logo</div>
        <div class="imgcontents">
          <div class="imgself">
            <img :src="Avatar" alt="Avatar" />
          </div>
          <div class="expAnddesc">
            <a class="example">查看示例</a>
            <div class="desc">建议上传1M以下的格式</div>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model:open="openVerify"
      okText="确定"
      cancelText="取消"
      title="请输入防火墙验证地址"
      @ok="handleOkVerify"
    >
      <a-input
        v-model:value="NgfwAddress"
        class="a-inp"
        placeholder="请输入防火墙验证地址"
      />
    </a-modal>
    <a-modal
      v-model:open="openUpdate"
      title="编辑资源包信息"
      @ok="handleOkUpdate"
      okText="确定"
      cancelText="取消"
    >
      <div
        class="search-input-update"
        v-for="(field, index) in fields"
        :key="index"
      >
        <div class="title">{{ field.label }}</div>
        <a-input
          v-model:value="resourceInfo[field.key]"
          class="a-inp"
          :readonly="isFieldReadonly(field.key)"
          :placeholder="`请输入${field.label}`"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import Avatar from "@/assets/卡通头像-copy.png";

import { reactive, ref } from "vue";
import { useRouter } from "vue-router"; // 引入 useRouter
// 预览部分
const openPreview = ref(false);
const showModalPreview = () => {
  openPreview.value = true;
};
const handleOkPreview = (e) => {
  console.log(e);
  openPreview.value = false;
};
// 验证按钮部分
const NgfwAddress = ref("");
const openVerify = ref(false);
const showModalVerify = () => {
  openVerify.value = true;
};
const handleOkVerify = (e) => {
  console.log(e);
  openVerify.value = false;
};
//发布按钮逻辑部分
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal } from "ant-design-vue";
const showConfirm = () => {
  Modal.confirm({
    title: "请问确定要发布吗？",
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode(
      "div",
      {
        style: "color:black;",
      },
      ""
    ),
    okText: "确定", // 设置确定按钮为中文
    cancelText: "取消", // 设置取消按钮为中文
    onOk() {
      console.log("确定");
    },
    onCancel() {
      console.log("取消");
    },
    class: "test",
  });
};
//模糊查询部分
const name = ref("");
const founder = ref("");
const fondtime = ref("");
const updatetime = ref("");
//上传图片部分
//编辑部分

const fields = [
  { label: "资源包名称", key: "name" },
  { label: "资源包模板", key: "model" },
  { label: "资源包说明", key: "desc" },
  { label: "字段修改", key: "amend" },
  { label: "状态", key: "status" },
  { label: "创建人", key: "founder" },
  { label: "创建时间", key: "fondtime" },
  { label: "修改时间", key: "updatetime" },
];
const isFieldReadonly = (fieldKey) => {
  // 如果状态为已发布，除了desc字段，其他字段都是只读的
  return resourceInfo.status === "已发布" && fieldKey !== "desc";
};
const resourceInfo = reactive({
  amend: "",
  desc: "",
  fondtime: "",
  founder: "",
  model: "",
  name: "",
  status: "",
  updatetime: "",
});
const openUpdate = ref(false);
const showModalUpdate = (record) => {
  openUpdate.value = true;
  Object.assign(resourceInfo, record);
  console.log("Editing user:", record);
};

const canEdit = (record) => {
  record.status === "未发布";
};
const handleOkUpdate = (e) => {
  console.log(e);
  openUpdate.value = false;
};
// 这是新建弹窗部分
const valueName = ref("");
const valueVersion = reactive("V1");
const open = ref(false);
const showModal = () => {
  open.value = true;
};
const handleOk = (e) => {
  console.log(e);
  open.value = false;
};
const selectedVersion = ref("V1");
const handleChange = (value) => {
  console.log(`selected ${value}`);
};
const columns = [
  {
    title: "资源包名称",
    dataIndex: "name",
    width: 110,
  },
  {
    title: "资源包模板",
    dataIndex: "model",
    width: 110,
  },
  {
    title: "资源包说明",
    dataIndex: "desc",
    width: 130,
  },
  {
    title: "字段修改",
    dataIndex: "amend",
    width: 110,
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "创建人",
    dataIndex: "founder",
  },
  {
    title: "创建时间",
    dataIndex: "fondtime",
    width: 200,
  },
  {
    title: "修改时间",
    dataIndex: "updatetime",
    width: 200,
  },

  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    width: 420,
  },
];
const data = [
  {
    key: 1,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "已发布",
    founder: "zzw",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 2,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "已发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 3,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "未发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 4,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "未发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 5,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "已发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 6,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "未发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 7,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "已发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
  {
    key: 8,
    name: "图片资源包",
    model: "v1",
    desc: "该资源包用于......",
    amend: "1",
    status: "已发布",
    founder: "陈凤",
    fondtime: "2023-12-03 11:09:09",
    updatetime: "2024-12-03 11:09:09",
  },
];

const router = useRouter(); // 获取 router 实例
function reLogin() {
  router.push("/login");
}
</script>

<style lang="scss" scoped>
.homeborder {
  width: 95%; //大小设置为100%
  height: 100%; //大小设置为100%
  position: fixed;
  background-size: 100% 100%;
  margin-left: 1%;
}
.editable-row-operations a {
  margin-right: 8px;
}
.tb {
  width: 86%;
}

.button {
  margin: 0 5px;
}
.top-margin {
  margin: 1px 0;
}
.modal-contents {
  display: flex;
}
.modal-title {
  font-weight: 500;
  line-height: 30px;
}
.search-input-update {
  height: 35px;
  margin: 20px;
  display: flex;
}

.search {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
}
.search-item {
  display: flex;
  width: 46%;
  height: 35px;
  padding: 0;
  margin: 10px 5px;
}
.search-item-preview {
  display: flex;
  width: 100%;
  height: 35px;
  padding: 0;
  margin: 10px 5px;
}
.title {
  width: 100px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #f8fafb;
  padding: 5px;
}
.title-preview {
  width: 100px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #f8fafb;
  padding: 5px;
}
.title-preview-img {
  width: 84px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #f8fafb;
}
.search-item-preview-img {
  display: flex;
  width: 100%;
  height: 50px;
  padding: 0;
  margin: 10px 5px;
}
.a-inp-preview {
  border-radius: 3px;
}
.a-inp {
  border-radius: 3px;
}
.query-search {
  background-color: #fafafa;
  width: 86%;
  height: 160px;
  margin-bottom: 10px;
}
.search-btn {
  display: flex;
  margin-left: 26px;
}
.search-btn-item {
  margin: 0 5px;
}
.imgcontents {
  display: flex;
  margin: 0 10px;
}
.imgself {
  width: 50px;
  height: 50px;
  img {
    width: 50px;
    height: 50px;
  }
}
.expAnddesc {
  margin: 0 15px;
  height: 50px;
}
</style>
